<template>
	<view class="collect" :style="{paddingBottom:isIphoneX?'196rpx':''}">
		<view class="searchBox">
			<view class="search">
				<u-icon name="search" color="#999" size="32"></u-icon>
				<input type="text" :value="goodsName" @input="searchGo" placeholder="请输入商品名称" />
			</view>
		</view>
		<view class="screen">
			<text class="fl" @tap="screenGo(0)" :class="{screenEd:screen==0}">全部</text>
			<text class="fl" @tap="screenGo(1)" :class="{screenEd:screen==1}">有优惠</text>
			<text class="fl" @tap="screenGo(2)" :class="{screenEd:screen==2}">平台</text>
			<text class="fl" @tap="screenGo(3)" :class="{screenEd:screen==3}">商家</text>
			<text class="fr" @tap="manageGo" v-if="collectList.length!=0" :class="{screenEd:isManage==1}">{{isManage?'完成':'管理'}}</text>
		</view>
		<view class="goodsList">
			<view class="nodata" v-if="collectList.length==0">
				<image src="../../static/svgIcon/noCoupon.svg" mode=""></image>
				<view class="tips">暂无收藏~</view>
			</view>
			<view class="each" v-for="(item,index) of collectList">
				<view class="chooseBox" v-if="isManage">
					<view class="checkbox" :class="{checkboxEd:item.checkS}" @tap="checkGo(index)">
						<u-icon name="checkmark" color="#fff" size="18" v-if="item.checkS"></u-icon>
					</view>
				</view>
				<dh-image class="niccImg" :src="item.goods.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
				<view class="goodsCont">
					<view class="tit ellipsis2">{{item.goods.name}}</view>
					<view class="like">
						{{item.goods.collection_count}}人喜欢
						<view class="label" v-if="item.goods.have_promotion==1">
							<text>惠</text>
							有优惠
						</view>
					</view>
					<view class="price">
						<text class="unit">￥</text>
						{{item.goods.price}}
						<text class="primeCost">￥{{item.goods.mktprice}}</text>
					</view>
					<view class="btnBox">
						<view class="goBuy" @tap="goBuy(item.goods.id)">去购买</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 删除按钮 -->
		<view class="okChoose" v-if="isManage" :style="{paddingBottom:isIphoneX?'76rpx':'',height:isIphoneX?'176rpx':'100rpx'}">
			<view class="selectAll" @tap="selectAllGo">
				<view class="allCheckbox" :class="{allCheckboxEd:selectAll}">
					<u-icon name="checkmark" color="#fff" size="20"></u-icon>
				</view>
				<text>全选</text>
			</view>
			<image @click="deleteGo" class="delete" src="https://lovebirdopen.com/static/img/svgIcon/delete.svg" mode=""></image>
			<!-- <view class="okBtn">去购买</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 手机机型
				modelmes:null,
				isIphoneX:false,
				// 搜索名称
				goodsName:'',
				// 筛选的
				screen:0,
				// 管理与否
				isManage:false,
				// 列表
				collectList:[],
				listReady:null,
				isLoadMore:false,
				page: 1,
				pageSize: 20,
				// 选择
				selectAll:false,
				ids:[],
			};
		},
		onLoad() {
			// 判断机型iPhone X的
			this.modelmes = uni.getStorageSync('modelmes');
			if (this.modelmes.search('iPhone X') != -1) {
			   this.isIphoneX = true;
			}
			this.getCollect();
		},
		// 滑动到底部
		onReachBottom() {
			if(!this.isLoadMore){
				this.getCollect();
			}
		},
		methods:{
			// 输入搜索名称
			searchGo(e){
				this.goodsName = e.detail.value;
				this.collectList = [];
				this.page = 1;
				this.getCollect();
			},
			// 筛选
			screenGo(type){
				this.screen = type;
				this.collectList = [];
				this.page = 1;
				this.getCollect();
			},
			// 管理
			manageGo(){
				this.isManage = !this.isManage;
				if(!this.isManage){
					this.collectList.forEach(item => {
						item.checkS = false;
					});
					this.selectAll = false;
				}
			},
			// 获取列表
			getCollect(){
				this.apiget('/fun/collection/index',{page:this.page,pageSize:this.pageSize,type:0,channel:this.screen,name:this.goodsName}).then(res =>{
					if(res.data.status == 200 ) {
						var addList = res.data.data.list;
						addList.forEach(item => {
							item.checkS = false;
						})
						this.collectList = this.collectList.concat(addList);
						this.listReady = 1;
						if(res.data.data.list.length<this.pageSize){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else if(res.data.data.list.length==this.pageSize && this.page == res.data.data.pageCount){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else{
							this.status = 'loading';
							this.page = ++ this.page;
						}
					}
				})
			},
			// 单选
			checkGo(index){
				if(this.collectList[index].checkS){
					var delIndex = this.ids.indexOf(this.collectList[index].id);
					this.ids.splice(delIndex,1);
					this.collectList[index].checkS = false;
					this.selectAll = false;
				}else{
					this.ids.push(this.collectList[index].id);
					this.collectList[index].checkS = true;
					if(this.ids.length==this.collectList.length){
						this.selectAll = true;
					}
				}
			},
			// 全选
			selectAllGo(){
				if(this.selectAll){
					this.collectList.forEach(item => {
						item.checkS = false;
					})
					this.ids = [];
					this.selectAll = false;
				}else{
					this.ids = [];
					this.collectList.forEach(item => {
						item.checkS = true;
						this.ids.push(item.id);
					})
					this.selectAll = true;
				}
			},
			// 删除
			deleteGo(){
				var idVal = this.ids.join(",");
				var _this = this;
				this.apipost('/fun/collection/delete',{id:idVal}).then(res =>{
					if(res.data.status == 200 ) {
						uni.showToast({
							icon: 'none',
							duration:1000,
							title: res.data.message,
							success: res => {
								setTimeout(function (){
									_this.collectList = [];
									_this.page = 1;
									_this.getCollect();
								}, 1000);
							},
						});
					}
				})
			},
			goBuy(id){
				uni.navigateTo({
					url: '../index/goodsInfo?id='+id
				});
			},
		}
	}
</script>

<style lang="scss">
	.collect{
		min-height: 100%;
		padding-bottom: 120rpx;
		background: #F8F8FA;
	}
	.searchBox{
		padding: 0 32rpx;
		background-color: #fff;
		
		.search{
			display: flex;
			height: 88rpx;
			align-items: center;
			background: #F8F8FA;
			border-radius: 36rpx;
			
			u-icon{
				margin: 0 21rpx;
			}
		
			input{
				flex: 1;
				height: 88rpx;
				font-size: 28rpx;
				color: #999;
			}
		}
	}
	.screen{
		height: 80rpx;
		padding: 20rpx 32rpx;
		margin-bottom: 24rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #333333;
		background-color: #fff;
		
		.fl{
			margin-right: 66rpx;
		}
		
		.fr{
			float: right;
		}
		
		.screenEd{
			color: #FF5238;
		}
	}
	.goodsList{
		background-color: #fff;
		padding-top: 12rpx;
		
		.each{
			padding: 12rpx 32rpx;
			display: flex;
			.chooseBox{
				width: 72rpx;
				height: 264rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.checkbox{
					width: 32rpx;
					height: 32rpx;
					line-height: 22rpx;
					text-align: center;
					background: #FFFFFF;
					border: 2rpx solid #FF5238;
					border-radius: 50%;
					
					u-icon{
						margin-top: 5rpx;
					}
				}
				.checkboxEd{
					background: #FF5238;
				}
			}
			
			.niccImg{
				width: 264rpx;
				height: 264rpx;
				margin-right: 24rpx;
				border-radius: 4rpx;
			}
			.goodsCont{
				flex: 1;
				width: 1px;
				.tit{
					font-size: 28rpx;
					line-height: 44rpx;
					color: #000;
				}
				.like{
					margin-bottom: 24rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #666;
					
					.label{
						display: inline-block;
						height: 40rpx;
						padding: 4rpx 8rpx 4rpx;
						margin-left: 8rpx;
						font-size: 20rpx;
						color: #FF5238;
						line-height: 32rpx;
						background: rgba(255, 82, 56, 0.12);
						border-radius: 42rpx;
						
						text{
							display: inline-block;
							width: 32rpx;
							height: 32rpx;
							margin-right: 4rpx;
							font-size: 20rpx;
							color: #FFFFFF;
							text-align: center;
							background: #FF5238;
							border-radius: 50%;
						}
					}
				}
				.price{
					margin-bottom: 4rpx;
					font-size: 36rpx;
					line-height: 52rpx;
					color: #FF5238;
					
					.unit{
						font-size: 28rpx;
					}
					.primeCost{
						margin-left: 8rpx;
						font-size: 24rpx;
						color: #E8E8E8;
					}
				}
				
				.btnBox{
					height: 48rpx;
					text-align: right;
					.goBuy{
						display: inline-block;
						height: 100%;
						padding: 0 20rpx;
						font-size: 24rpx;
						line-height: 48rpx;
						color: #333333;
						border: 1rpx solid #999999;
						border-radius: 48rpx;
					}
				}
				
			}
		}
	}
	// 底部按钮
	.okChoose{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		padding: 18rpx 32rpx 18rpx 48rpx;
		background-color: #fff;
		
		.selectAll{
			float: left;
			display: flex;
			height: 64rpx;
			align-items: center;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.56);
			
			.allCheckbox{
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
				text-align: center;
				border: 2rpx solid #FF5238;
				border-radius: 50%;
				font-size: 0;
				
				u-icon{
					margin-top: 5rpx;
				}
			}
			.allCheckboxEd{
				background-color: #FF5238;
			}
		}
		.okBtn{
			float: right;
			width: 184rpx;
			height: 64rpx;
			background: #FF5238;
			border-radius: 32px;
			font-size: 28rpx;
			line-height: 64rpx;
			color: #FFFFFF;
			text-align: center;
		}
		.delete{
			float: right;
			width: 48rpx;
			height: 48rpx;
			margin-left: 32rpx;
			margin-top: 8rpx;
		}
	}
</style>
